<template>
	<view class="content">
		<view class="mark-box" v-if="isShow">
			<view class="jingwai-box" v-if="jingwaiShow">
				<view class="dingwei1" @click="goto(true,'https://visaoffer.yijiuplus.com/index/index/detail?id=2068&nav=0')">
				</view>
				<view class="dingwei2" @click="goto(true,'https://vvans.swiftpass.cn/VERE/hkCashReturn/activity?offerId=336')">
				</view>
				<view class="dingwei3" @click="goto(true,'https://m.unionpayintl.com/ZT/wbdl/')"></view>
				<view class="dingwei4"
					@click="goto(true,'https://www.unionpayintl.com/u-plan/merchant/593718885197168?offer=u&type=1')"></view>
			</view>
			<view class="xingqian-box" v-else>
				<view class="dingwei1"
					@click="goto(true,'https://visaoffer.yijiuplus.com/index/index/detail?id=2092&nav=1&utm_source=WeChat&utm_medium=xiechengqianzheng_QRCode_20230420_1&utm_campaign=2023April')">
				</view>
				<view class="dingwei2" @click="goto(true,'https://visaoffer.yijiuplus.com/index/index/detail?cid=31&id=1898')">
				</view>
				<view class="dingwei3"
					@click="goto(true,'https://www.mcomp.com.cn/offerh5/showOfferH5OfferListDetail/?offerid=5133')"></view>
				<view class="dingwei4"
					@click="goto(true,'https://www.mcomp.com.cn/offerh5/showOfferH5OfferListDetail/?offerid=5322')"></view>
			</view>
			<view class="close" @click="isShow = false">

			</view>
		</view>
		<view class="logo-box">
			<view class="logo">

			</view>
		</view>
		<view class="title">

		</view>

		<view class="main-box">

		</view>

		<view class="box-1">

			<view class="body-box1">
				<view class="btn-group-1">
					<view class="btn-group-1-1"
						@click="goto(false,'http://m.cib.com.cn/creditcard/minisite/XDQQ0406/index.html')">
						<text>兴动全球</text>
						<text>返现活动</text>
						<text>最高返现100%</text>
					</view>
					<view class="btn-group-1-2" @click="goto(false,'https://t.cib.com.cn/7zmyAb')">
						<text>兴动全球</text>
						<text>银联卡境外“6积分”</text>
						<text>达标交易享兑权益</text>
					</view>
				</view>
				<view class="btn-group-2"
					@click="goto(false,'https://ccshop.cib.com.cn:8010/html/whw/fsk220608/wx_index.html')">

				</view>
			</view>
		</view>

		<view class="box-2">
			<view class="xingqian">

			</view>
			<view class="xingqian-btn-group">
				<view class="jingxuan1" @click="goto(true,'https://visaoffer.yijiuplus.com/index/index/detail?id=1981&nav=0')">
				</view>
				<view class="jingxuan2"
					@click="goto(true,'https://www.mcomp.com.cn/cib/showOfferH5OfferListDetail/?offerid=5437')"></view>
				<view class="jingxuan3"
					@click="goto(true,'https://www.unionpayintl.com/cardholderServ/serviceCenter/merchant/61408051250?type=1')">
				</view>
			</view>
			<view class="gengduo-btn" @click="showModal(2)">

			</view>
			<view class="xuxian">

			</view>
			<view class="jingwaishenghuo">

			</view>
			<view class="jingwai-btn-group">
				<view class="btn1" @click="goto(true,'https://visaoffer.yijiuplus.com/index/index/detail?id=1897&nav=0')">
				</view>
				<view class="btn2"
					@click="goto(true,'https://www.mcomp.com.cn/offerh5/showOfferH5OfferListDetail/?offerid=2873')"></view>
				<view class="btn3"
					@click="goto(true,'https://www.unionpayintl.com/cardholderServ/serviceCenter/merchant/595119314005?type=1')">
				</view>
				<view class="btn4"
					@click="goto(true,'https://globaloffers.amexpressnetwork.com/amex-web/chosen-plan-h5/wx/#/detail/1262https://globaloffers.amexpressnetwork.com/amex-web/chosen-plan-h5/wx/#/detail/1262')">
				</view>
			</view>
			<view class="gengduo-btn m32" @click="showModal(1)">

			</view>
		</view>

		<view class="box-3">
			<view class="box-btngroup-3">
				<view class="btn-3-1">
					<view class="btn-3-1-bg"></view>
					<view class="btn-3-1-btn"
						@click="goto(false,'https://wm.cib.com.cn/html/webapp/v3/fastIssue/index.html#/newFast/index.html?id=e5fa90bcac024986b82808a34b1632aa&cards=1251&faces=A')">
					</view>
				</view>
				<view class="btn-3-1">
					<view class="btn-3-2-bg"></view>
					<view class="btn-3-1-btn"
						@click="goto(false,'https://wm.cib.com.cn/html/webapp/v3/fastIssue/index.html#/newFast/index.html?id=e5fa90bcac024986b82808a34b1632aa&cards=1447&faces=A')">
					</view>
				</view>
				<view class="btn-3-1">
					<view class="btn-3-3-bg"></view>
					<view class="btn-3-1-btn"
						@click="goto(false,'https://wm.cib.com.cn/html/webapp/v3/fastIssue/index.html#/newFast/baseInfo.html?userName=kami25cRZGg%253D&idNo=kami25cRZGg%253D&phone=kami25cRZGg%253D')">
					</view>
				</view>
				<view class="btn-3-1">
					<view class="btn-3-4-bg"></view>
					<view class="btn-3-1-btn"
						@click="goto(false,'https://wm.cib.com.cn/html/webapp/v3/fastIssue/index.html#/newFast/index.html?id=e5fa90bcac024986b82808a34b1632aa&cards=1628&faces=A')">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				jingwaiShow: false
			}
		},
		onLoad() {

		},
		methods: {
			goto(flag, url) {
				location.href = url
				//2023-6-25修改 要求取消弹窗
				/* if (flag) {
					uni.showModal({
						content: '您即将前往第三方网站，请注意您的账号和财产安全。',
						success: (res) => {
							if (res.confirm) {
								location.href = url
							}
						}
					})
				} else {
					location.href = url
				} */
			},
			showModal(flag) {
				this.isShow = true
				if (flag == 1) {
					this.jingwaiShow = true
				} else {
					this.jingwaiShow = false
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url('../../static/bg.jpg') no-repeat center top;
		background-size: 100% auto;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mark-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.close {
			width: 56rpx;
			height: 56rpx;
			background: url('../../static/close.png') no-repeat center center;
			background-size: cover;
			margin-top: 54rpx;
		}

		.jingwai-box {
			width: 614rpx;
			height: 396rpx;
			background: url('../../static/jingwaitanchuang.png') no-repeat center center;

			background-size: cover;
			position: relative;
		}

		.xingqian-box {
			width: 642rpx;
			height: 414rpx;
			background: url('../../static/xingqiantanchuang.png') no-repeat center center;
			background-size: cover;
			position: relative;
		}

		.dingwei1 {
			position: absolute;
			width: 272rpx;
			height: 98rpx;
			top: 124rpx;
			left: 20rpx;
		}

		.dingwei2 {
			position: absolute;
			width: 272rpx;
			height: 98rpx;
			top: 124rpx;
			right: 40rpx;
		}

		.dingwei3 {
			position: absolute;
			width: 272rpx;
			height: 98rpx;
			bottom: 60rpx;
			left: 20rpx;
		}

		.dingwei4 {
			position: absolute;
			width: 272rpx;
			height: 98rpx;
			bottom: 60rpx;
			right: 40rpx;
		}
	}

	.logo-box {
		display: flex;
		justify-content: flex-start;
		width: 100%;

		.logo {
			width: 342rpx;
			height: 40rpx;
			background: url('../../static/logo.png') no-repeat center center;
			background-size: cover;
			margin-top: 40rpx;
			margin-left: 24rpx;
		}
	}

	.title {
		width: 500rpx;
		height: 206rpx;
		background: url('../../static/title.png') no-repeat center center;
		background-size: cover;
	}

	.main-box {
		width: 750rpx;
		height: 950rpx;
		background: url('../../static/main.png') no-repeat center center;
		background-size: cover;
		margin-top: 18rpx;
	}

	.box-1 {
		width: 696rpx;
		height: 452rpx;
		background: url('../../static/rect1.png') no-repeat center center;
		background-size: cover;
		margin-top: -228rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.heard-box1 {
			width: 670rpx;
			height: 112rpx;
			background: url('../../static/top-rect.png') no-repeat center center;
			background-size: cover;
			margin-top: 12rpx;
		}

		.body-box1 {
			// flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 152rpx;

			.btn-group-1 {
				display: flex;
				flex-direction: row;
				justify-content: center;
				// margin-top: 28rpx;

				.btn-group-1-1,
				.btn-group-1-2 {
					width: 264rpx;
					height: 156rpx;
					background: url('../../static/small-box.png') no-repeat center center;
					background-size: cover;
					margin: 0 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text {
						font-size: 12px;
						color: #c17744;
						line-height: 16px;
						font-weight: 800;
					}
				}
			}

			.btn-group-2 {
				width: 492rpx;
				height: 72rpx;
				background: url('../../static/btn1.png') no-repeat center center;
				background-size: cover;
				margin-top: 32rpx;
			}
		}
	}

	.box-2 {
		width: 696rpx;
		height: 1016rpx;
		background: url('../../static/rect2.png') no-repeat center center;
		background-size: cover;
		// margin-top: -228rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.xingqian {
			width: 366rpx;
			height: 48rpx;
			background: url('../../static/xingqian.png') no-repeat center center;
			background-size: cover;
			margin-top: 170rpx;
		}

		.xingqian-btn-group {
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-top: 40rpx;

			.jingxuan1 {
				width: 194rpx;
				height: 172rpx;
				background: url('../../static/jingxuan1.png') no-repeat center center;
				background-size: cover;
				margin: 0 10rpx;
			}

			.jingxuan2 {
				width: 194rpx;
				height: 172rpx;
				background: url('../../static/jingxuan2.png') no-repeat center center;
				background-size: cover;
				margin: 0 10rpx;
			}

			.jingxuan3 {
				width: 194rpx;
				height: 172rpx;
				background: url('../../static/jingxuan3.png') no-repeat center center;
				background-size: cover;
				margin: 0 10rpx;
			}
		}

		.gengduo-btn {
			width: 256rpx;
			height: 52rpx;
			background: url('../../static/gengduo-btn.png') no-repeat center center;
			background-size: cover;
			margin-top: 28rpx;
		}

		.xuxian {
			width: 612rpx;
			border-bottom: 2px dashed #c17744;
			margin: 30rpx 0;
		}

		.jingwaishenghuo {
			width: 366rpx;
			height: 48rpx;
			background: url('../../static/jingwaishenghuo.png') no-repeat center center;
			background-size: cover;
		}

		.jingwai-btn-group {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			gap: 18rpx;
			margin-top: 28rpx;

			.btn1 {
				width: 302rpx;
				height: 112rpx;
				background: url('../../static/jingwai1.png') no-repeat center center;
				background-size: cover;
			}

			.btn2 {
				width: 302rpx;
				height: 112rpx;
				background: url('../../static/jingwai2.png') no-repeat center center;
				background-size: cover;
			}

			.btn3 {
				width: 302rpx;
				height: 112rpx;
				background: url('../../static/jingwai3.png') no-repeat center center;
				background-size: cover;
			}

			.btn4 {
				width: 302rpx;
				height: 112rpx;
				background: url('../../static/jingwai4.png') no-repeat center center;
				background-size: cover;
			}
		}

		.m32 {
			margin-top: 32rpx !important;
		}

	}

	.box-3 {
		width: 698rpx;
		height: 728rpx;
		background: url('../../static/rect3.png') no-repeat center center;
		background-size: cover;
		// margin-top: -228rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 74rpx;

		.box-btngroup-3 {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-row-gap: 28rpx;
			grid-column-gap: 60rpx;
			margin-top: 160rpx;

			.btn-3-1 {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.btn-3-1-bg {
				width: 232rpx;
				height: 188rpx;
				background: url('../../static/card1.png') no-repeat center center;
				background-size: cover;
			}

			.btn-3-2-bg {
				width: 232rpx;
				height: 188rpx;
				background: url('../../static/card2.png') no-repeat center center;
				background-size: cover;
			}

			.btn-3-3-bg {
				width: 232rpx;
				height: 188rpx;
				background: url('../../static/card3.png') no-repeat center center;
				background-size: cover;
			}

			.btn-3-4-bg {
				width: 232rpx;
				height: 188rpx;
				background: url('../../static/card4.png') no-repeat center center;
				background-size: cover;
			}

			.btn-3-1-btn {
				width: 198rpx;
				height: 40rpx;
				background: url('../../static/lijibanli-btn.png') no-repeat center center;
				background-size: cover;
				margin-top: 18rpx;
			}
		}
	}
</style>